<template>
  <el-table :data="list" border style="width: 100%" @row-click="viewDetail">
    <el-table-column prop="title" label="标题" />
    <!-- <el-table-column prop="date" label="日期" /> -->
    <el-table-column prop="like_count" empty-text="--" label="收藏" />
    <el-table-column prop="view_count" empty-text="--" label="关注" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click.stop="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button
          v-if="scope.row.status === 'draft'"
          type="primary"
          size="small"
          @click.stop="handleSubmitReview(scope.row)"
        >
          提交审核
        </el-button>
        <el-button type="primary" size="small" @click.stop="dialogVisible = true">
          发布
        </el-button>
        <el-button type="danger" size="small" @click.stop="handleDelete(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination" style="text-align: right; margin-top: 16px">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="searchParams.size"
      :current-page="searchParams.page"
      @current-change="handlePageChange"
    />
  </div>
  <PublishSettingDialog v-model:visible="dialogVisible" />
</template>

<script setup lang="ts">
import { defineProps, watch, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import * as pieceApi from "@/api/piece";
import { useList } from "@/composables/useList";
import { submitArticleForReview } from "@/api/piece";
import { useRequest } from "@/composables/useRequest";
import PublishSettingDialog from "./PublishSettingDialog.vue";

interface Article {
  id: number;
  title: string;
  date: string;
  name?: string;
  favorite?: number;
  follow?: number;
}

const props = defineProps<{ searchParams: any }>();

const dialogVisible = ref(false);

const { list, total, query, refresh, setPage } = useList<Article>(
  pieceApi.getMyPieceList
);

const router = useRouter();

const { run: runQuery } = useRequest();

// 监听 searchParams 变化，自动查询
watch(
  () => props.searchParams,
  (val) => {
    runQuery(() => query({ ...val }));
  },
  { immediate: true, deep: true }
);

function handleEdit(row: Article) {
  router.push({ name: "EditArticle", params: { id: row.id } });
}

function handleSubmitReview(row: Article) {
  submitArticleForReview(row.id)
    .then(() => {
      ElMessage.success("文章已提交审核");
      refresh();
    })
    .catch((err) => {
      console.error("提交审核失败:", err);
      ElMessage.error(err.message || "提交审核失败");
    });
}

function handleDelete(row: Article) {
  ElMessageBox.confirm("确定删除该文章吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    pieceApi
      .deleteMyPiece(row.id)
      .then(() => {
        ElMessage.success("文章删除成功");
        refresh();
      })
      .catch((err) => {
        console.error("删除文章失败:", err);
        ElMessage.error(err.message || "删除文章失败");
      });
  });
}

function handlePageChange(val: number) {
  setPage(val);
}

function viewDetail(row: Article) {
  router.push({ name: "ArticleDetail", params: { id: row.id } });
}
</script>

<style scoped></style>
